﻿<!DOCTYPE html>
<html>
  <head>
	<title>设置页面</title>
	<style type="text/css">
		html,body,ul,li{padding:0px;margin:0px;font-family:"MicroSoft YaHei",SimHei,SimSun;font-size:12px;}
		.title{font-weight:bold;}
		.help{font-weight:normal;text-decoration:none;display:inline-block;padding-left:4px;font-size:10px;color:#0063dc;cursor:pointer;}
		.mainwrapper{width:340px;background:-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(0.5,#fafafa),to(#fff));padding:4px;}
		ul.contentsetting{margin-top:4px;margin-bottom:4px;}
		ul.contentsetting li{padding-left:4px;padding-right:4px;margin-top:4px;}
		ul.contentsetting li .settingarea{margin-left:14px;}
		ul.contentsetting li .settingarea input[type=text]{width:100%;}
		.serial{display:inline-block;width:14px;}
	</style>
	<script type="text/javascript">
		var tweetTemplates = {};

		tweetTemplates.defaultValues={
			pageTemplate: "[标题,30][网址]",
			picTemplate:"#分享图片#[图片网址]",
			textTemplate:"[文字]来自[网址]"
		};

		tweetTemplates.load = function(){
			var templateFields = document.getElementsByClassName('templateField');
			for(var i=0,l=templateFields.length;i<l;i++){
				var field = templateFields[i],
					fieldName = field.getAttribute("id");
				if(!!!localStorage[fieldName]){//本地存储无内容，使用默认值
					if(!!tweetTemplates.defaultValues[fieldName]){//默认值存在
						field.value = tweetTemplates.defaultValues[fieldName];//使用默认值
						localStorage[fieldName] = tweetTemplates.defaultValues[fieldName];//存储默认值到本地存储
					}
				}else{//加载本地存储内容
					field.value = localStorage[fieldName];
				}
			}
		};

		tweetTemplates.save = function(){
			var templateFields = document.getElementsByClassName('templateField');
			for(var i=0,l=templateFields.length;i<l;i++){
				var field = templateFields[i],
					fieldName = field.getAttribute("id");
				localStorage[fieldName] = field.value;
			}
		};

		window.onload = function(){
			var templateFields = document.getElementsByClassName('templateField');
			for(var i=0,l=templateFields.length;i<l;i++){
				var field = templateFields[i];
				field.onblur = function(){
					tweetTemplates.save();
				}
			}
			tweetTemplates.load();
		}
	</script>
  </head>
  <body>
	<div class="mainwrapper">
		<div class="title">微博模板设置<span class="help" href="javascript:;" title="微博模板&#13;指在浏览器中点击右键分享内容时，针对不同的情况，使用的由个人定制的固定广播格式。">什么是模板</span></div>
		<ul class="contentsetting">
			<li>
				<div class="settingtitle">
					<span class="serial">1.</span>网页<span class="help" title="可用字段&#13;[标题] - 当前网站标题栏中的文字&#13;[网址] - 当前页面地址栏中的地址&#13;">可用模板字段</span>
				</div>
				<div class="settingarea">
					<input type="text" id="pageTemplate" class="templateField" value=""></input>
				</div>
			</li>
			<li>
				<div class="settingtitle">
					<span class="serial">2.</span>图片<span class="help" title="可用字段&#13;[标题] - 当前网站标题栏中的文字&#13;[网址] - 当前页面地址栏中的地址&#13;[图片网址] - 当前图片本身的网址&#13;[图片链接网址] - 当前图片链接到的网址">可用模板字段</span>
				</div>
				<div class="settingarea">
					<input type="text" id="picTemplate" class="templateField" value=""></input>
				</div>
			</li>
			<li>
				<div class="settingtitle">
					<span class="serial">3.</span>文字<span class="help" href="javascript:;" title="可用字段&#13;[标题] - 当前网站标题栏中的文字&#13;[网址] - 当前页面地址栏中的地址&#13;[文字] - 选中的文字内容&#13;[文字链接网址] - 选中的文字链接到的网址">可用模板字段</span>
				</div>
				<div class="settingarea">
					<input type="text" id="textTemplate" class="templateField" value=""></input>
				</div>
			</li>
		</ul>

		<div class="title">微博模板语法</div>

		<ul class="contentsetting">
			<li>
				<div class="settingtitle">
					<span class="serial">1.</span>"["和"]"之间的内容将被实际内容替换
				</div>
				<div class="settingtitle">
					<span class="serial">2.</span>"["和"]"支持自动截断文字<span class="help" title="例如&quot;[标题,3]&quot;表示&#13;自动把&quot;标题&quot;截断为3个字符">详情</span>
				</div>
			</li>
		<ul>
	</div>

  </body>
</html>
